<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>选择城市</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../css/chosen.min.css" />
	<style>
		body {
            background: #eee;
        }

        .dept_select {
            min-width: 200px;
        }

        button {
            padding: 4px 10px;
            border-radius: 3px;
            border: 0;
            background: #444;
            color: #fff;
        }
	</style>
	<script type="text/javascript" src="../js/thirdparty/jquery.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/chosen.jquery.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/area_chs.js" ></script>
</head>
<body>
	<center>
        <select id="country" class="dept_select"></select>
        <select id="province" class="dept_select"></select>
        <select id="city" class="dept_select"></select>

        <button>提交</button>
    </center>
	<script type="text/javascript">
        var areaObj = [];
        function initLocation(e) {
            var a = 0;
            for (var m in e) {
                areaObj[a] = e[m];
                var b = 0;
                for (var n in e[m]) {
                    areaObj[a][b++] = e[m][n];
                }
                a++;
            }
        }
    </script>
	<script type="text/javascript" src="../js/thirdparty/location_chs.js" ></script>
	<script>
        var country = '';
        for (var a = 0; a <= _areaList.length - 1; a++) {
            var objContry = _areaList[a];
            country += '<option value="' + objContry + '" a="' + (a + 1) + '">' + objContry + '</option>';
        }
        $("#country").html(country).chosen().change(function () {
            var a = $("#country").find("option[value='" + $("#country").val() + "']").attr("a");
            var _province = areaObj[a];
            var province = '';
            for (var b in _province) {
                var objProvince = _province[b];
                if (objProvince.n) {
                    province += '<option value="' + objProvince.n + '" b="' + b + '">' + objProvince.n + '</option>';
                }
            }
            if (!province) {
                province = '<option value="0" b="0">------</option>';
            }
            $("#province").html(province).chosen().change(function () {
                var b = $("#province").find("option[value='" + $("#province").val() + "']").attr("b");
                var _city = areaObj[a][b];
                var city = '';
                for (var c in _city) {
                    var objCity = _city[c];
                    if (objCity.n) {
                        city += '<option value="' + objCity.n + '">' + objCity.n + '</option>';
                    }
                }
                if (!city) {
                    var city = '<option value="0">------</option>';
                }
                $("#city").html(city).chosen().change();
                $(".dept_select").trigger("chosen:updated");
            });
            $("#province").change();
            $(".dept_select").trigger("chosen:updated");
        });
        $("#country").change();
        $("button").click(function () {
            alert($("#country").val() + $("#province").val() + $("#city").val());
        });
	</script>
</body>
</html>
